<template>
	<view class="container">
		<view class="evaluate">
			<view>
				<text>服务评分</text>
			</view>
			<view>
				<img src="@/static/shop.jpg" alt="" />
				<view>
					<text>宇宙汽修厂</text>
					<uni-rate :touchable="false" v-model="score" />
				</view>
			</view>
		</view>

		<view class="word">
			<text>评语(0-200字)</text>
			<uni-easyinput type="textarea" v-model="evaluate" placeholder="请写下您的意见和建议..."></uni-easyinput>
		</view>

		<view class="word">
			<text>照片(选填)</text>
			<uni-file-picker v-model="picture" fileMediatype="image" :limit="1" mode="grid" @select="pictureUpload"
				@delete="pictureRemove" />
		</view>

		<view class="btn">
			<button @click="toEvaluate" type="primary">提交评价</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 5,
				evaluate: '',
				image: '',
				picture: {}
			}
		},
		methods: {
			// 移除照片
			pictureRemove(e) {
				this.picture = {}
			},
			// 照片上传
			async pictureUpload(e) {
				this.picture.url = await this.uploadFile(e.tempFilePaths[0])
				this.image = this.picture.url
			},
			// 文件上传
			uploadFile(imgUrl) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://localhost:8080/file/upload',
						header: {
							'Authorization': 'Bearer ' + wx.getStorageSync('token')
						},
						filePath: imgUrl,
						name: 'file',
						success: (resp) => {
							if (resp.statusCode == 200) {
								resolve(JSON.parse(resp.data).data);
							} else {
								reject(new Error('Upload failed'));
							}
						},
					})
				})
			},
			toEvaluate() {
				uni.request({
					url: 'http://localhost:8080/user/evaluate',
					header: {
						'Authorization': 'Bearer ' + wx.getStorageSync('token')
					},
					method: 'POST',
					data: {
						userId: 1,
						shopId: 1,
						orderId: 1,
						serviceId: 1,
						rate: this.score,
						imgs: this.image,
						content: this.evaluate
					},
					success(res) {
						console.log(res);
					}
				})
				wx.redirectTo({
					url: '/pages/my/myOrder/myOrder'
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #fff;
		height: 100vh;
	}

	.evaluate {
		padding: 20rpx;
		border-bottom: 2rpx solid #ccc;
	}

	.evaluate>view:nth-child(1) {
		font-size: 28rpx;
		padding: 10rpx;
	}

	.evaluate>view:nth-child(2) {
		display: flex;
	}

	.evaluate>view:nth-child(2)>img {
		height: 200rpx;
		width: 280rpx;
		padding-right: 40rpx;
	}

	.evaluate>view:nth-child(2)>view>text {
		display: block;
		font-weight: bold;
		font-size: 32rpx;
		padding-bottom: 50rpx;
	}

	.word {
		padding: 40rpx 40rpx 0;
	}

	.word>text {
		display: block;
		font-size: 28rpx;
		font-weight: 400;
		margin: 10rpx 0;
	}

	.btn {
		padding: 40rpx 40rpx 0;
	}
</style>